<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">    
    <title>京东首页</title>
</head>
<body>
    <!-- 第一步, 创建一个最大的盒子  -->
    <div class="container">
        <!-- 导航区 -->
        <div class='nav'>
            <!-- nav-box 实现的作用是让ul的内容在页面居中-->
            <div class="nav-box">
                <ul>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">京东会员</a></li>
                    <li><a href="#">我的京东</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">客户服务</a></li>
                    <li><a href="#">网站导航</a></li>
                    <li><a href="#">手机京东</a></li>
                </ul>
            </div>
        </div>
        <div class="header-box">
            <!-- 头部,输入搜索商品 -->
            <div class="header">
                <!-- logo区 -->
                <div class="logo-box">
                    <a href="http://www.jd.com">
                        <!-- alt屬性作用, 当图片加载不进来得时候，显示二级属性 -->
                        <img width="190" height="120" src="./img/logo.gif" alt="logo">                    
                    </a>
                </div>
                <!-- 搜索区的盒子 -->
                <div class="search-box">
                    <!-- 搜索栏 -->
                    <div class="search-bar">
                        <!-- 输入框 -->
                        <input type="text" placeholder="请输入查询商品">
                        <!-- 两个按钮,使用button的时候,要给type=button属性,增加浏览器兼容性 -->
                        <div class="search-btn"><span class="iconfont iconfont-search">&#xe63c;</span></div>
                        <div class="cart-btn"><span class="iconfont iconfont-cart">&#xe63b;</span>我的购物车 </div>                        
                    </div>
                    <!-- 导航区 -->
                    <ul class="recommend">
                        <li><a href="#" target="_bank"> 美妆预售</a></li>
                        <li><a href="#" target="_bank"> 618开抢</a></li>
                        <li><a href="#" target="_bank"> 哆啦A梦</a></li>
                        <li><a href="#" target="_bank"> 低至6.18</a></li>
                        <li><a href="#" target="_bank"> 小黄人</a></li>
                        <li><a href="#" target="_bank"> 新品大赏</a></li>
                        <li><a href="#" target="_bank"> 24期免息</a></li>
                        <li><a href="#" target="_bank"> 粽子</a></li>
                        <li><a href="#" target="_bank"> 手机</a></li>
                    </ul>
                    <ul class="">
                        <li><a href="#" target="_bank"> 秒杀</a></li>
                        <li><a href="#" target="_bank"> 优惠券</a></li>
                        <li><a href="#" target="_bank"> PLUS会员</a></li>
                        <li><a href="#" target="_bank"> 品牌闪购</a></li>
                        <li><a href="#" target="_bank"> 拍卖</a></li>
                        <li><a href="#" target="_bank"> 京东家电</a></li>
                        <li><a href="#" target="_bank"> 京东超市</a></li>
                        <li><a href="#" target="_bank"> 京东生鲜</a></li>
                        <li><a href="#" target="_bank"> 京东国际</a></li>
                    </ul>
                </div>
                <!-- 广告区域 -->
                <div class="ad-box">
                    <a href="https://www.jd.com" target="_bank">
                        <img src="./img/adbox.gif" alt="ad">
                    </a>
                </div>
            </div>
        </div>
        <!-- 内容区 -->
        <div class="content">
            <!-- 分类广告 -->
            <div class="wrapper">
                <!-- 菜单 -->
                <div class="menu-box"></div>
                <!-- 轮播图 -->
                <div class="slider-box"></div>
                <!-- 广告位 -->
                <div class="ad-box"></div>
                <!-- 信息 -->
                <div class="info"></div>
            </div>
            <!-- wrapper复用,因为盒子的宽度等属性是一样的 -->
            <div class="wrapper">

            </div>
        </div>
    </div>    
</body>
</html>